<template>
    <div :class="avatarClass">
        <img class="avatar-img" :src="avatarSrc" :alt="alt" @click="click">
        <TechIcon class="vip-icon" v-if="haveVip" name="member-avatar-vip" />
    </div>
</template>

<script>
import TechIcon from './TechIcon';
import defaultAvatar from '@assets/img/default_avatar.png';
export default {
    name: 'Avatar',
    components: {
        TechIcon,
    },
    computed: {
        avatarClass() {
            const { size, shape } = this.$props;
            return `tech-avatar avatar-${size} avatar-${shape}`;
        },
        avatarSrc() {
            const { src } = this.$props;
            return src ? src : defaultAvatar;
        },
    },
    props: {
        src: String,
        alt: {
            type: String,
            default: defaultAvatar,
        },
        size: {
            type: String,
            default: 'default', // small, default, large
        },
        shape: {
            type: String,
            default: 'cricle', // cricle, square
        },
        haveVip: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
    @avatar-base: 48px;
    .tech-avatar {
        display: inline-block;
        &.avatar-mini {
            width: 24px;
            height: 24px;
            position: relative;
        }
        .avatar-img {
            width: 100%;
            height: 100%;
        }
        &.avatar-small {
            width: @avatar-base - 8px;
            height: @avatar-base - 8px;
        }
        &.avatar-default {
            width: @avatar-base;
            height: @avatar-base;
        }
        &.avatar-large {
            width: 60px;
            height: 60px;
        }
        &.avatar-cricle {
            > img {
                border-radius: 50%;
            }
        }
        &.avatar-square {
            > img {
                border-radius: @border-radius;
            }
        }
        .vip-icon {
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
</style>

